<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 文件字符编码 -->
		<meta charset="utf-8">
		<!-- 兼容手机,禁止缩放 -->
<!--		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />-->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<!-- 告诉IE使用最新内核 -->
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>简历</title>
		<style id="style" type="text/css">
			/*你好,我是一名前端小白
			 *接下来本小白用CSS写一个太极八卦
			 */
			/*首先创建一个div
			 *给定高度和宽度
			 *定位
			 *添加背景色
			 *圆形
			 *添加阴影
			 */
			/*.bagua{
				position: fixed;
				top: 8vh;
				right: 10vw;
				border: black solid 1px;
				height: 202px;
				width: 202px;
				border-radius: 50%;
				background: rgb(0,0,0);
				background: linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(128,128,128,1) 50%, rgba(255,255,255,1) 50%);
				box-shadow: -10px 10px 5px #888888;
			}*/
			/*
			 *在写两个"鱼眼"
			 */
			/*.bagua:before,.bagua:after{
				content: '';
				display: inline-block;
				height: 100px;
				width: 100px;
			}*/
			/*
			 *两个"鱼眼"不同的定位和背景颜色
			 */
			/*.bagua:before{
				border-radius: 50%;
				position: absolute;
				top: 50px;
				left: 0;
				background: rgb(0,0,0);
				background: radial-gradient(circle, rgba(0,0,0,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
			}
			.bagua:after{
				border-radius: 50%;
				position: absolute;
				top: 50px;
				right: 0;
				background: rgb(255,255,255);
				background: radial-gradient(circle, rgba(255,255,255,1) 25%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 100%);
			}*/
			/*OK,太极八卦写完!*/
		</style>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div class="container">
		</div>
		<div class="bagua"></div>
		<script src="main.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
